<template> 
  <div style="text-align:center; width: 100%">
    <div v-if="!isFetchingList" id="hover-to-fetch" @mouseover="emit('on-hover')">
      {{noMore ? '...就这些了...' : '轻触加载更多'}}
    </div>
    <a-spin :spinning="isFetchingList"></a-spin>
  </div>
</template>

<script lang="ts" setup>
const emit = defineEmits(['on-hover'])
defineProps({
  isFetchingList: {
    type: Boolean,
    default: false
  },
  noMore: {
    type: Boolean,
    default: false,
  },
})
</script>

<style scoped>
#hover-to-fetch {
  width: 100%;
  margin: 20px 0;
  text-align: 0;
  color: #40a9ff;
  cursor: pointer;
}
</style>